<template>
  <div class="personal-center">
    <div class="page-header">
      <h2>个人中心</h2>
    </div>

    <div class="personal-content">
      <!-- 使用原生 HTML 元素替代 Element Plus 组件 -->
      <div class="card">
        <div class="card-header">
          <h3>个人信息</h3>
        </div>
        <div class="card-body">
          <div class="profile-container">
            <!-- 头像设置区域 -->
            <div class="avatar-section">
              <h4>头像设置</h4>
              <div class="avatar-upload">
                <div class="avatar-preview">
                  <img :src="userStore.currentUser?.avatar" :alt="userStore.currentUser?.username">
                </div>
                <div class="avatar-actions">
                  <button class="btn primary" @click="triggerFileInput">选择文件</button>
                  <input
                      type="file"
                      ref="fileInput"
                      style="display: none"
                      accept="image/*"
                      @change="handleAvatarChange"
                  >
                  <button class="btn success" @click="uploadAvatar">上传头像</button>
                </div>
              </div>
            </div>

            <!-- 个人信息区域 -->
            <div class="info-section">
              <h4>基本信息</h4>
              <form class="info-form">
                <div class="form-item">
                  <label for="username">用户名</label>
                  <input
                      type="text"
                      id="username"
                      v-model="userInfoForm.username"
                      disabled
                  >
                </div>
                <div class="form-item">
                  <label for="email">邮箱</label>
                  <input
                      type="email"
                      id="email"
                      v-model="userInfoForm.email"
                  >
                </div>
                <div class="form-actions">
                  <button type="button" class="btn primary" @click="updateUserInfo">保存信息</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>

      <!-- 修改密码区域 -->
      <div class="card">
        <div class="card-header">
          <h3>修改密码</h3>
        </div>
        <div class="card-body">
          <form class="password-form">
            <div class="form-item">
              <label for="oldPassword">原密码</label>
              <input
                  type="password"
                  id="oldPassword"
                  v-model="passwordForm.oldPassword"
                  placeholder="请输入原密码"
              >
            </div>
            <div class="form-item">
              <label for="newPassword">新密码</label>
              <input
                  type="password"
                  id="newPassword"
                  v-model="passwordForm.newPassword"
                  placeholder="请输入新密码"
              >
            </div>
            <div class="form-item">
              <label for="confirmPassword">确认密码</label>
              <input
                  type="password"
                  id="confirmPassword"
                  v-model="passwordForm.confirmPassword"
                  placeholder="请再次输入新密码"
              >
            </div>
            <div class="form-actions">
              <button type="button" class="btn primary" @click="submitPasswordForm">提交</button>
              <button type="button" class="btn default" @click="resetPasswordForm">重置</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const fileInput = ref<HTMLInputElement>()

// 用户信息表单
const userInfoForm = reactive({
  username: '',
  email: ''
})

// 密码表单
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 初始化用户信息
onMounted(() => {
  if (userStore.currentUser) {
    userInfoForm.username = userStore.currentUser.username || ''
    userInfoForm.email = userStore.currentUser.email || ''
  }
})

// 触发文件选择
const triggerFileInput = () => {
  fileInput.value?.click()
}

// 处理头像选择
const handleAvatarChange = (event: Event) => {
  const file = (event.target as HTMLInputElement).files?.[0]
  if (file) {
    if (!file.type.startsWith('image/')) {
      alert('请选择图片文件')
      return
    }

    // 创建临时URL用于预览
    const reader = new FileReader()
    reader.onload = (e) => {
      if (userStore.currentUser) {
        userStore.currentUser.avatar = e.target?.result as string
      }
    }
    reader.readAsDataURL(file)
  }
}

// 上传头像
const uploadAvatar = async () => {
  const file = fileInput.value?.files?.[0]
  if (!file) {
    alert('请先选择头像文件')
    return
  }

  try {
    await userStore.uploadAvatar(file)
    alert('头像上传成功')
    // 清空文件输入
    if (fileInput.value) {
      fileInput.value.value = ''
    }
  } catch (error) {
    alert('头像上传失败')
  }
}

// 更新用户信息
const updateUserInfo = async () => {
  try {
    await userStore.updateUserInfo(userInfoForm)
    alert('用户信息更新成功')
  } catch (error) {
    alert('用户信息更新失败')
  }
}

// 提交密码修改表单
const submitPasswordForm = async () => {
  if (!passwordForm.oldPassword || !passwordForm.newPassword || !passwordForm.confirmPassword) {
    alert('请填写完整信息')
    return
  }

  if (passwordForm.newPassword !== passwordForm.confirmPassword) {
    alert('两次输入的新密码不一致')
    return
  }

  if (passwordForm.newPassword.length < 6) {
    alert('新密码长度不能少于6位')
    return
  }

  try {
    await userStore.changePassword(passwordForm)
    alert('密码修改成功')
    resetPasswordForm()
  } catch (error) {
    alert('密码修改失败')
  }
}

// 重置密码表单
const resetPasswordForm = () => {
  passwordForm.oldPassword = ''
  passwordForm.newPassword = ''
  passwordForm.confirmPassword = ''
}
</script>

<style scoped>
.personal-center {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #303133;
}

.personal-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
  background: #fafafa;
}

.card-header h3 {
  margin: 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.card-body {
  padding: 20px;
}

.profile-container {
  display: flex;
  gap: 40px;
}

.avatar-section {
  width: 300px;
  padding: 20px;
  border-right: 1px solid #ebeef5;
}

.info-section {
  flex: 1;
}

.avatar-upload {
  text-align: center;
}

.avatar-preview {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto 16px;
  overflow: hidden;
  border: 1px solid #ebeef5;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
}

.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.info-form, .password-form {
  max-width: 400px;
}

.form-item {
  margin-bottom: 20px;
}

.form-item label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #606266;
}

.form-item input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  transition: border-color 0.3s;
  font-size: 14px;
}

.form-item input:focus {
  outline: none;
  border-color: #409eff;
}

.form-item input:disabled {
  background-color: #f5f7fa;
  color: #c0c4cc;
  cursor: not-allowed;
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.btn.primary {
  background-color: #409eff;
  color: white;
}

.btn.primary:hover {
  background-color: #66b1ff;
}

.btn.success {
  background-color: #67c23a;
  color: white;
}

.btn.success:hover {
  background-color: #85ce61;
}

.btn.default {
  background-color: #fff;
  color: #606266;
  border: 1px solid #dcdfe6;
}

.btn.default:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

@media (max-width: 768px) {
  .profile-container {
    flex-direction: column;
    gap: 20px;
  }

  .avatar-section {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #ebeef5;
  }

  .form-actions {
    flex-direction: column;
  }
}
</style>